<#macro layout>
<!DOCTYPE HTML lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<meta name="description" content="Static &amp; Dynamic Tables" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>${(title)!}</title>
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="${ctx}/css/idangerous.swiper.css">
<link rel="stylesheet" href="${ctx}/css/app.min.css">
<link rel="stylesheet" href="${ctx}/css/manimation.css">
<link rel="stylesheet" href="${ctx}/css/index.css">
<link rel="stylesheet" href="${ctx}/static/assets/css/font-awesome.min.css" />
<!--  <script src='${ctx}/static/jquery/1.8.3/jquery.js'
                type='text/javascript'></script> -->
<script src="${ctx}/js/jquery-1.10.2.min.js"></script>
<script defer src="${ctx}/js/idangerous.swiper.m.js"></script>
   <!-- basic scripts -->
</head>
<#nested>
</html>
</#macro>

<@layout>
<head>

</head>
<style>
html,body {
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
}

html,body {
	margin: 0;
	border: 0 none;
	padding: 0;
}

body {
	font-size: 1em;
	font-family: "Microsoft Yahei", "黑体", monospace;
}

.title,.content p {
	display: none;
	color: #2ae0c8;
}
</style>
<style>
.swiper-container,.swiper-slide {
	width: 100%;
	height: 100%;
}
</style>
<script>

$(function(){

  var mySwiper = $('.swiper-container').swiper({
    mode:'vertical',
    loop: true,
		mousewheelControl:true,
		keyboardControl:true,
		onSlideChangeStart:function(){
		},
		onSlideChangeEnd:function(swiper){
		
/* 	$('.content p').each($).show(1000).wait(1600);
 */	},
		onSwiperCreated:function(){
	//	$('.title').wait(500).slideDown().delay(500).animate({fontSize:"250%",color:"red",display:"block"},3000,"swing");
//$('.text p').each($).show(1000).wait(1600);
		}
    
  });
 

})
function openaudio(obj,id){
	$(obj).next().show();
	$(obj).hide();
	var x=$(".audios"+id);
	x[0].play;

}
function end(obj,id){
	$(obj).prev().show();
	$(obj).hide();
	$(".audios"+id).pause();

}
</script>
<body>
<div style="height:0px;display:none">
    <img src="${(pic)!}"/>
</div> 
	<div class="swiper-container">
		<!-- 滑动操作指示 -->
		<!-- 主体 -->
		<div class="swiper-wrapper">
			 <#if (contlist?size>0)>
				<#list contlist as m>
			<div class="swiper-slide slide"
				style="background: url('') no-repeat center center;
				 background-color: white; background-size: 100% 100%;">
				<div class="${(m.tx)!}" id="imgdiv${(m.id)}"
					style="<#if ((m.mbbh)=="1")>	height:100%;width :100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="2")>	height: 70%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="3")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="4")>	height: 100%;width : 100%;left : 0px;top : 25%;</#if>
						<#if (m.mbbh=="5")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>" >
					<img  id="urls${(m.id)}"
						src="${ctx}${(m.url)!}" 
						style="width: 100%; height: 100%;" />
				</div>
				<div class="${(m.tx)!}" id="nrs${(m.id)}"
					style="font-size:12px;color:<#if (m.color??) && (m.color)!="">${(m.color)!}<#else>black</#if>;<#if (m.mbbh=="1")>	height:100%;width :100%;left : 0px;top : 0px;</#if><#if (m.mbbh=="2")>	height: 25%;width : 100%;left : 0px;top : 75%;</#if><#if (m.mbbh=="3")>	height: 30%;width : 100%;left : 0px;top : 40%;background-color: white;</#if><#if (m.mbbh=="4")>	height: 25%;width : 100%;left : 0px;top : 0px;</#if><#if (m.mbbh=="5")>	height: 50%;width : 100%;left : 0px;top : 60%;</#if>" >
					<p style="color:<#if (m.color??) && (m.color)!="">${(m.color)!}<#else>black</#if>;">${(m.nr)!}</p>
					<#if (m.musicurl??) && (m.musicurl)!="">
						<audio src="${ctx}${(m.musicurl)!}" class="audios${(m.id)}"  controls="controls"></audio>
					</#if>
				</div>
			<!-- 	<div style="text-align:left">
						<a href="#"  name="start${(m.id)}" onclick="openaudio(this,'${(m.id)}');" >
							<i class="icon-pause bigger-160" style="color:#888888;font-size:200%"></i></a>
							<a href="#"  name="end${(m.id)}" onclick="end(this,'${(m.id)}');" style="display:none" >
							<i class="icon-forward bigger-160" style="color:#888888;font-size:200%"></i></a>
							<audio src="${ctx}${(m.musicurl)!}" class="audios${(m.id)}"  controls="controls"></audio>
				</div> -->
			</div>
			</#list>
			</#if>
		</div>
	</div>
</body>
<#include "/common/cyend.html" /> 
<script>

var imgUrl = '${(pic)!}';
var lineLink = '${(url)!}wxContent/view/${(id)!}';
var descContent =  '${(descContent)!}';
var shareTitle = '${(title)!}';
var appid = '${(AppId)!}';

function shareFriend() {
	WeixinJSBridge.invoke('sendAppMessage', {
		"appid" : appid,
		"img_url" : imgUrl,
		"img_width" : "640",
		"img_height" : "640",
		"link" : lineLink,
		"desc" : descContent,
		"title" : shareTitle
	}, function(res) {
		_report('send_msg', res.err_msg);
	})
}
function shareTimeline() {
	WeixinJSBridge.invoke('shareTimeline', {
		"img_url" : imgUrl,
		"img_width" : "640",
		"img_height" : "640",
		"link" : lineLink,
		"desc" : descContent,
		"title" : shareTitle
	}, function(res) {
		_report('timeline', res.err_msg);
	});
}
function shareWeibo() {
	WeixinJSBridge.invoke('shareWeibo', {
		"content" : descContent,
		"url" : lineLink,
	}, function(res) {
		_report('weibo', res.err_msg);
	});
}
// 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
	// 发送给好友
	WeixinJSBridge.on('menu:share:appmessage', function(argv) {
		shareFriend();
	});

	// 分享到朋友圈
	WeixinJSBridge.on('menu:share:timeline', function(argv) {
		shareTimeline();
	});

	// 分享到微博
	WeixinJSBridge.on('menu:share:weibo', function(argv) {
		shareWeibo();
	});
}, false);
//显示所有功能按钮
 wx.showOptionMenu();

wx.showAllNonBaseMenuItem();
</script>
</@layout>
